<template>
  <div class="layout-switcher">
    <el-drawer v-model="visible" :with-header="true" direction="rtl" size="320px" title="界面设置">
      <div class="section">
        <div class="section-title">主题模式</div>
        <el-radio-group v-model="localTheme" @change="onThemeChange">
          <el-radio-button label="light">明亮</el-radio-button>
          <el-radio-button label="dark">暗黑</el-radio-button>
        </el-radio-group>
      </div>
      <div class="section">
        <div class="section-title">布局</div>
        <el-radio-group v-model="localLayout" @change="onLayoutChange">
          <el-radio-button label="top">顶部</el-radio-button>
          <el-radio-button label="side">侧边</el-radio-button>
        </el-radio-group>
      </div>
      <div class="section">
        <div class="section-title">主题色</div>
        <el-color-picker v-model="localPrimary" @change="onPrimaryChange" :predefine="predefineColors" />
      </div>
      <div class="section">
        <el-switch v-model="localCompact" @change="onCompactChange" active-text="紧凑模式" />
      </div>
    </el-drawer>
    <el-tooltip content="界面设置" placement="left">
      <el-button class="fab" type="primary" :icon="Setting" circle @click="visible = true" />
    </el-tooltip>
  </div>
  </template>

<script setup>
import { ref, watch } from 'vue'
import { useStore } from 'vuex'
import { Setting } from '@element-plus/icons-vue'

const store = useStore()
const visible = ref(false)

const predefineColors = ['#2C85EC','#165DFF','#722ED1','#13C2C2','#52C41A','#FA8C16','#F5222D','#262626']

const localTheme = ref(store.getters.uiTheme)
const localLayout = ref(store.getters.uiLayout)
const localPrimary = ref(store.getters.uiPrimaryColor)
const localCompact = ref(store.getters.uiCompact)

watch(() => store.getters.uiTheme, v => { localTheme.value = v })
watch(() => store.getters.uiLayout, v => { localLayout.value = v })
watch(() => store.getters.uiPrimaryColor, v => { localPrimary.value = v })
watch(() => store.getters.uiCompact, v => { localCompact.value = v })

const onThemeChange = (val) => store.commit('setTheme', val)
const onLayoutChange = (val) => store.commit('setLayout', val)
const onPrimaryChange = (val) => store.commit('setPrimaryColor', val)
const onCompactChange = (val) => store.commit('setCompact', val)
</script>

<style scoped>
.layout-switcher .fab {
  position: fixed;
  right: 18px;
  bottom: 24px;
  z-index: 2000;
  box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08), 0 3px 6px -4px rgba(0,0,0,0.12), 0 9px 28px 8px rgba(0,0,0,0.05);
}
.section { margin-bottom: 18px; }
.section-title { font-size: 13px; color: var(--el-text-color-secondary); margin-bottom: 8px; }
</style>


